(function () {
    var bannerNavUl = document.getElementById('banner-nav-ul');
    var bannerNav = document.getElementById('banner-nav');
    // 寻找所有的menu
    var menus = document.querySelectorAll('.menus-box .menu');
    // 寻找所有的li
    var bannerLis = document.querySelectorAll('#banner-nav-ul li');
    //事件委托,onmouseenter事件不冒泡 onmouseover事件冒泡 所以用它
    bannerNavUl.onmouseover = function (e) {
        if (e.target.tagName.toLowerCase() == 'li') {
            var t = e.target.getAttribute('data-t');
            // 寻找匹配的menu
            var themenu = document.querySelector(' .menus-box .menu[data-t='+ t +']');

            // 排他操作 ，让所有的盒子都去掉current类名
            for (var i = 0; i<menus.length; i++) {
                menus[i].className= 'menu'
            }
            // 匹配上的加上 current 类名
            themenu.className = 'menu current';
            // 排他操作 ，让所有的li都去掉current类名
            for (var i = 0; i < bannerLis.length; i++) {
                bannerLis[i].className = bannerLis[i].getAttribute('data-t');
            }
            // 当前碰到的li 添加current类
            e.target.className += ' current';
        }
    }
    // 当鼠标离开大盒子的时候，菜单要关闭
    bannerNav.onmouseleave = function () {
        for (var i = 0; i < bannerLis.length; i++) {
            bannerLis[i].className = bannerLis[i].getAttribute('data-t');
            menus[i].className = 'menu';
        }
    }
})();